<template>
    <div class="purchasestop">
        <div class="list_box" v-for="item in orderList" :key="item.time + item.proid">
            <div class="head">
                <p><van-icon name="shop-o" color="#666" size="14" />嗨购商城官方旗舰店<van-icon name="arrow" size="14" color="#666" /></p>
                <p class="but">已完成</p>
            </div>
            <div class="list_item">
                <!-- 产品图片 -->
                <img :src="item.img1" alt="">
                <!-- 产品信息----价格、标题、数量 -->
                <div class="listInfo">
                <!-- 产品标题 -->
                <div class="title van-multi-ellipsis--l2">{{ item.proname }}</div>
                <div class="info">
                    <!-- 产品单价 -->
                    <span class="price"><i>已付:</i>￥{{ item.originprice | setPriceInt }}<i>.{{ item.originprice | setPriceFloat }}</i></span>
                    <!-- 产品数量 -->
                    <span class="num">×{{ item.num }}</span>
                </div>
                <!-- 购物车商品操作 -->
                <p class="remove"><button>查看物流</button></p>
                </div>
            </div>
        </div>
    </div>
</template>
<style lang="stylus" scoped>
.purchasestop
    height 100%
    background-color #f7f7f7
    padding .9375rem
.list_box
    margin-top 1.25rem
    padding .625rem
    display flex
    flex-direction column
    background-color white
    border-radius .625rem
    .head
        display flex
        font-size .875rem
        justify-content space-between
        p
            display flex
            align-items center
        .but
            color #000
.list_item
    display flex
    align-items center
    height 7.5rem
    img
      width 6rem
      height 6rem
      margin 0 .625rem
      border-radius .625rem
    .listInfo
      display flex
      flex-direction column
      justify-content space-evenly
      height 100%
      flex 1
      .title
        font-size .875rem
        color #262626
      .info
        display flex
        justify-content space-between
        padding-right .625rem
        .price
          color red
          font-weight 600
          i
            font-weight 400
            font-size .75rem
            font-style: normal
        .num
          font-size .75rem
          color #666
      .remove
        font-size .75rem
        color red
        display flex
        flex-direction row-reverse
        align-items center
        button
            color white
            padding .3125rem .9375rem
            background-color #000
            border-radius 62.4375rem
            border 0
            margin-left .3125rem
</style>
<script>
import Vue from 'vue'
import { getConFirmOrder } from '@/api/purchase'
import { Icon } from 'vant'
Vue.use(Icon)
export default {
  data () {
    return {
      // 用户id
      userid: '',
      // 待付款的商品列表
      orderList: []
    }
  },
  mounted () {
    this.userid = this.$store.state.userId
    let newarr = this.$store.state.orderState ? this.$store.state.orderState : []
    // 获取当前用户id待付款的商品列表
    newarr = newarr.filter((item) => {
      if (item.userid === this.userid) {
        if (item.isflag) {
          return item
        }
      }
      return false
    })
    newarr.forEach((item) => {
      getConFirmOrder({ params: { userid: item.userid, time: item.key } }).then((res) => {
        this.orderList = [...this.orderList, ...res.data]
      })
    })
  },
  filters: {
    // 获取总价整数部分
    setPriceInt (val) {
      if (val) {
        return parseInt(val)
      }
    },
    // 获取总价小数部分
    setPriceFloat (val) {
      if (val) {
        return val * 100 % 100 >= 10 ? val * 100 % 100 : '0' + val * 100 % 100
      }
    }
  }
}
</script>
